import React, { useEffect, useState } from 'react'
import { IndexBar, NavBar, Cell } from 'react-vant'
import { useNavigate } from "react-router-dom"
import citylist from "../uilst/cities.json"
type Props = {}


const Addresstow = (props: Props) => {
    const charCodeOfA = 'A'.charCodeAt(0)
    const navigate = useNavigate()
    const [Addresslist, setAddresslist]: any = useState([])
    useEffect(() => {
        setAddresslist(citylist.cityList)

    })
    const tohome = (val: any) => {
        localStorage.setItem("addresstow", val)
        navigate("/home/home")
    }
    return (
        <div className='Address'>
            <NavBar
                title="目的地"
                leftText="返回"
                onClickLeft={() => navigate(-1)}
            />
            <IndexBar>
                {Addresslist && Addresslist.map((val: any, i: any) => (
                    <div key={i}>
                        <IndexBar.Anchor index={val.title} />
                        {
                            val.citys && val.citys.map((item: any, index: any) => {
                                return <Cell title={item.name} key={index} onClick={() => { tohome(item.name) }} />
                            })
                        }


                    </div>
                ))}
            </IndexBar>

        </div>
    )
}

export default Addresstow